import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { UserAudioWrap } from "./style";
import { userAudioAction } from "../../../store/actionTypes";
import { getSizeImage } from "@/utils/format-utils";
import { NavLink } from "react-router-dom";

export default memo(function UserAudio(props) {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(userAudioAction(props.id));
  }, [dispatch, props.id]);
  const { userAudioInfo } = useSelector(
    (state) => ({
      userAudioInfo: state.getIn(["userInfo", "userAudioInfo"]),
    }),
    shallowEqual
  );
  const userInfo = userAudioInfo.length !== 0 && userAudioInfo;

  return (
    <UserAudioWrap>
      {userInfo ? (
        userInfo.djRadios.length == 0 ? (
          <React.Fragment></React.Fragment>
        ) : (
          <React.Fragment>
            <p className="user-audio-p">
              {userInfo ? userInfo.djRadios[0].dj.nickname : ""}创建的电台
            </p>
            <ul>
              {userInfo
                ? userInfo.djRadios.map((item, index) => {
                    return (
                      <li key={item.name}>
                        <NavLink
                          to={{
                            pathname: "/djradio",
                            search: "?id=" + item.id,
                          }}
                          className="user-img"
                        >
                          <img src={getSizeImage(item.picUrl, 50)} alt="" />
                        </NavLink>
                        <div className="user-name">
                          <NavLink
                            to={{
                              pathname: "/djradio",
                              search: "?id=" + item.id,
                            }}
                          >
                            <span>{item.name}</span>
                          </NavLink>
                          <i className="user-zf-icon zf-icon"></i>
                        </div>
                        <span className="user-span user-sc fl">
                          订阅{item.subCount}次
                        </span>
                        <span className="user-span user-pc fl">
                          {item.programCount}期
                        </span>
                      </li>
                    );
                  })
                : ""}
            </ul>
          </React.Fragment>
        )
      ) : (
        ""
      )}
    </UserAudioWrap>
  );
});
